<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Purple Admin</title>
  <th:block th:replace="librarian/common :: head"></th:block>
</head>

<body>
  <div class="container-scroller">
    <!-- partial:../../partials/_navbar.html -->
    <div th:replace="librarian/common :: navbar"></div>
    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <div class="row row-offcanvas row-offcanvas-right">
        <!-- partial:../../partials/_sidebar.html -->
          <th:block th:replace="librarian/common :: sidebar"></th:block>
        <div class="content-wrapper">
          <div class="row">
         <!--    <div class="col-md-6 d-flex align-items-stretch grid-margin">
              <div class="row flex-grow"> -->
                <div class="col-12 grid-margin">
                  <div class="card">
                    <div class="card-body">
                      <h4 class="card-title">Reader Update</h4>
                      <p class="card-description">
                        Please Update the Reader at the form. 
                      </p>
                        <div class="form-group">
                          <label for="exampleInputEmail1">Id</label>
                          <input type="text" class="form-control" id="Id" placeholder="Enter the ReaderId">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputPassword1">Name</label>
                          <input type="text" class="form-control" id="name" placeholder="Enter the name">
                        </div>
                         <div class="form-group">
                          <label for="exampleInputEmail1">phoneNumber</label>
                          <input type="text" class="form-control" id="phoneNumber" placeholder="Enter the phoneNumber">
                        </div>
                         <div class="form-group">
                          <label for="exampleInputEmail1">email</label>
                          <input type="text" class="form-control" id="email" placeholder="Enter the email">
                        </div>
                         <div class="form-group">
                          <label for="exampleInputEmail1">password</label>
                          <input type="password" class="form-control" id="password" placeholder="Enter the password">

                        <button type="submit" class="btn btn-success mr-2" onclick="insert()">Submit</button>
                       

                    </div>
                  </div>
                </div>
               
           
              </div>
            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->
      <div th:replace="librarian/common :: footer"></div>
        <!-- partial -->
      </div>
      <!-- row-offcanvas ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->
  <div th:replace="librarian/common :: scripts"></div>
  <script>
      function insert(){
        var id = $("#Id").val();
        var name = $("#name").val();
         var phoneNumber = $("#phoneNumber").val();
        var email = $("#email").val();
         var password = $("#password").val();
        var data = {
                    "name":name,
                    "phoneNumber":phoneNumber,
                    "email":email,
                    "password":password
                    }
        // let formData=new FormData();
        // formData.append("categoryName", categoryName)

        $.ajax({
          url:"/api/reader/"+id,
          type:"put",
          datatype:"json",
          data: getFormData(data),
          processData: false,
          contentType: false,
          success:function(data){
                console.log(data);
                alert("success");
            },
           error:function (resp) {
               alert(resp.responseJSON.message);
            }
        });
      }
    </script>
</body>

</html>
